<template>
	<div>
		<el-container>
		  <el-header>
		  	<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
				  <router-link to='/form'><el-menu-item index="1">表单处理1</el-menu-item></router-link>
				  <router-link to='/form2'><el-menu-item index="2">表单处理2</el-menu-item></router-link>
				  <el-submenu index="3">
				    <template slot="title">我的工作台</template>
				    <el-menu-item index="3-1">选项1</el-menu-item>
				    <el-menu-item index="3-2">选项2</el-menu-item>
				    <el-menu-item index="3-3">选项3</el-menu-item>
				  </el-submenu>
				  <router-link to='/modal'><el-menu-item index="4">模态框封装</el-menu-item></router-link>
				  <router-link to='/modal1'><el-menu-item index="5">模态框1</el-menu-item></router-link>
				  <router-link to='/modal2'><el-menu-item index="6">模态框2</el-menu-item></router-link>
				  <router-link to='/modal3'><el-menu-item index="7">模态框3</el-menu-item></router-link>
				  <router-link to='/ajax'><el-menu-item index="8">Ajax</el-menu-item></router-link>
				  <router-link to='/topo'><el-menu-item index="9">拓扑图</el-menu-item></router-link>
				</el-menu>
		  </el-header>
		</el-container>
	</div>
</template>

<script>
	export default {
	  data() {
	      return {
	      	activeIndex: '1',
	        activeIndex2: '1'
	      };
	    },
	    methods: {
	      handleSelect(key, keyPath) {
	        /*this.activeIndex = key;
	        this.activeIndex2 = key;*/
	      }
	    }
	}
</script>

<style>
	.el-menu{
		padding:0 100px;
	}
</style>